<template>
  <div class="dashboard-editor-container">
    <!--<panel-group @handleSetLineChartData="handleSetLineChartData" />-->
    <div class="" style="margin-bottom: 25px;">
      <el-row :gutter="12">
        <el-col v-for="(item, index) in tabulateData" :key="index" :span="8">
          <el-card shadow="always" class="index-item">
            <div class="item-title">{{ item.label }}</div>
            <div class="item-data-box">
              <i class="iconfont" :class="item.icon" />
              <span class="data-num" style="display: inline-block;">{{ item.total }}</span>
            </div>
            <div class="sub-title">{{ item.totalLabel }}: {{ item.allTotal }} {{ item.unit }}</div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="8">
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 24}" :xl="{span: 24}" style="padding-right:8px;margin-bottom:30px;">
        <transaction-table />
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import RaddarChart from './components/RaddarChart'
import PieChart from './components/PieChart'
import BarChart from './components/BarChart'
import TransactionTable from './components/TransactionTable'

const lineChartData = {
  newVisitis: {
    expectedData: [10000, 12000, 16100, 13400, 10500, 16000, 16500],
    actualData: [12000, 8200, 9100, 15400, 16200, 14000, 14500]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'DashboardAdmin',
  components: {
    // PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    TransactionTable
  },
  data() {
    return {
      tabulateData: [
        { label: '监测药店数量', total: '172家', icon: 'icon-xiaoquguanli', totalLabel: '所售药品种类', allTotal: 4365, unit: '件' },
        { label: '当日客流总量', total: '56789位', icon: 'icon-lajigarbage3', totalLabel: '昨日客流总量', allTotal: 76853, unit: '位' },
        { label: '当日销售额', total: '34567.78元', icon: 'icon-qingli', totalLabel: '本月累计销售额', allTotal: 1456.78, unit: '万元' }
      ],
      lineChartData: lineChartData.newVisitis
    }
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }

  .item-title-top {
    padding-left: 10px;
    font-weight: bold;
    color: #4e4e4e;
  }
  .index-item {
    font-size: 15px;
    cursor: pointer;
    /*text-align: center;*/
    .item-title {
      color: rgba(0, 0, 0, 0.75);
      /*font-size: 14px;*/
      line-height: 22px;
    }
    .item-data-box {
      line-height: 50px;
      font-size: 30px;
      white-space: nowrap;
      text-overflow: ellipsis;
      word-break: break-all;
      border-bottom: 1px solid #e8e8e8;
      padding-bottom: 5px;
      margin-bottom: 10px;
      .iconfont {
        color: rgba(0, 0, 0, 0.5);
        font-size: 0.95em;
      }
      .data-num {
        color: rgba(0, 0, 0, 0.95);
        font-variant: tabular-nums;
        letter-spacing: 2px;
      }
    }
    .sub-title {
      color: rgba(0, 0, 0, 0.65);
      /*font-size: 14px;*/
    }
  }

  .content-margin {
    margin-bottom: 25px;
    background: #fff;
    padding: 20px 20px 10px 20px;
  }

  .index-item:hover {
    .item-data-box .iconfont {
      color: #42b983;
      transform: scale(1.9) rotate(60deg);
    }
  }
}

.el-table .warning-row td {
  color: #e1b59f;
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
